<template>
    <h2>新增门店信息</h2>
    <table>
        <tr>
            <td>公告标题</td>
            <td>
                <input type="text" placeholder="请输入公告标题" v-model="Info.info_Title"/>
            </td>
        </tr>
        <tr>
            <td>公告内容</td>
            <td>
                <textarea v-model="Info.info_string" cols="30" rows="5"></textarea>
            </td>
        </tr>
        <tr>
            <td>公告类型</td>
            <td>
                <select  v-model="Info.info_Type">
                    <option value="0">--请选择--</option>
                    <option v-for="item in infotype" :value="item.type_Id">{{ item.type_Name }}</option>
                </select>
            </td>
        </tr>
        <tr>
            <td>
                <input type="button" class="btn btn-success" value="添加" @click="AddShop" />
            </td>
        </tr>
    </table>

</template>
<script setup lang="ts">
import axios from 'axios';
import { ref,onMounted } from 'vue';
import { useRouter } from 'vue-router';

onMounted(()=>{
    getType();
})
const router=useRouter();

//创建响应式数据加载公告类型
const infotype=ref([{
    "type_Id": 0,
    "type_Name": ""
}])

//加载公告类型
const getType=()=>{
    axios.get("https://localhost:7283/api/Info/ShowInfoType")
    .then(res=>{
        infotype.value=res.data
    })
}


//创建响应式数据用于完成添加
const Info=ref({
  "info_Id": 0,
  "info_Title": "",
  "info_string": "",
  "info_Type": 0
})

//添加
const AddShop=()=>{
    //验证
    var zzname=/^[\u4e00-\u9fa5]{1,20}$/
    if(!zzname.test(Info.value.info_Title)){
        alert("公告标题20以内的中文汉字")
        return;
    }
    if(Info.value.info_string==""){
        alert("公告内容不能为空")
        return;
    }
    if(Info.value.info_string.length>50){
        alert("公告内容不大于50个字")
        return;
    }
    if(Info.value.info_Type==0){
        alert("请选择公告类型")
        return;
    }
    axios.post("https://localhost:7283/api/Info/AddInfo",Info.value)
    .then(res=>{
        if(res.data>0){
            alert('添加成功')
            router.push("/ShowInfo")
        }else{
            alert('添加失败')
        }
    })
    .catch(error=>{
        alert(error)
    })
}






</script>